<template>
  <a-layout-footer class="footer">
    <div class="footer-content">
      <div class="footer-inner">
        <div class="footer-col footer-left">
          <p class="copyright">created by xhh</p>
          <p class="company-desc">云图库 · 私人网盘 & 协同编辑 · AI 扩图</p>
        </div>

        <div class="footer-col footer-center">
          <nav class="footer-links">
            <a href="/coming-soon.html" target="_blank" rel="noopener noreferrer">关于我们</a>
            <a href="/coming-soon.html" target="_blank" rel="noopener noreferrer">隐私政策</a>
            <a href="/coming-soon.html" target="_blank" rel="noopener noreferrer">联系我们</a>
            <a href="/coming-soon.html" target="_blank" rel="noopener noreferrer">帮助中心</a>
          </nav>
          <div class="extra-note">© {{ new Date().getFullYear() }} HuiPicture</div>
        </div>

        <div class="footer-col footer-right">
          <div class="beian-wrap">
            <a
              class="beian"
              :href="icpHref"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="ICP备案查询"
            >
              <img src="/beian.png" alt="备案" />
              <span class="icp-text">{{ icpNumber }}</span>
            </a>

            <a class="gongan-link" :href="gonganHref" target="_blank" rel="noreferrer">
              {{ gonganText }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </a-layout-footer>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 支持通过 prop 传入备案号与公安备案信息，若不传则使用占位文本
const props = defineProps<{
  icp?: string
  icpHref?: string
  gonganText?: string
  gonganHref?: string
}>()

// 默认使用你提供的公安备案链接文本与地址（可通过 props 覆盖）
const icpNumber = computed(() => props.gonganText ?? '赣公网安备36098202000373号')
const icpHref = computed(
  () => props.gonganHref ?? 'https://beian.mps.gov.cn/#/query/webSearch?code=36098202000373'
)
</script>

<style scoped>
.footer {
  background: white;
  text-align: center;
  padding: 20px;
  /* 不再固定在页面底部，放回文档流中，让用户滚动到页面底部可见 */
  position: static;
  margin-top: 24px;
  /* box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); */
}

.copyright {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.footer-inner {
  max-width: 1200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.footer-col {
  flex: 1;
}

.footer-left {
  text-align: left;
}

.footer-center {
  text-align: center;
}

.footer-right {
  text-align: right;
}

.footer-links a {
  margin: 0 8px;
  color: #666;
  text-decoration: none;
  font-size: 13px;
}

.company-desc {
  margin: 6px 0 0;
  color: #999;
  font-size: 13px;
}

.extra-note {
  margin-top: 8px;
  color: #999;
  font-size: 12px;
}

.beian-wrap {
  display: flex;
  align-items: center;
}

.beian {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #666;
  text-decoration: none;
  font-size: 13px;
}

.beian img {
  height: 20px;
  width: 20px;
  object-fit: contain;
  display: inline-block;
}

.icp-text {
  color: #666;
}

.gongan-link {
  color: #666;
  text-decoration: none;
  font-size: 13px;
  margin-left: 8px;
}

@media (max-width: 480px) {
  .footer-content {
    flex-direction: column;
    gap: 6px;
    padding-bottom: 8px;
  }
  .beian img {
    height: 18px;
    width: 18px;
  }
}
</style>
